import React, { useState, useRef, useEffect, useLayoutEffect } from 'react';

const UserLayoutEffectView = () => {
  const [count, setCount] = useState(0);
  const hRef = useRef(null)

  /*   useEffect(() => {
      console.log(`useEffect执行${count}次`)
      let r = Math.random() * 255;
      let g = Math.random() * 255;
      let b = Math.random() * 255;
      const pre = Date.now();
      // console.log(pre)
      while (Date.now() - pre < 1000) {
        // console.log("这个循环的目的，就是模拟一个业务，需要一秒钟来处理")
      }
      hRef.current.style.backgroundColor = `rgb(${r},${g},${b})`;
  
    }, [count]);
   */
  // 当在 useEffect 里面的操作需要处理 DOM,并且会改变页面的样式,就需要用 useLayoutEffect 替换 useEffect,否则可能会出现闪屏问题。
  useLayoutEffect(() => {
    console.log(`useEffect执行${count}次`)
    let r = Math.random() * 255;
    let g = Math.random() * 255;
    let b = Math.random() * 255;
    const pre = Date.now();
    // console.log(pre)
    while (Date.now() - pre < 1000) {
      // console.log("这个循环的目的，就是模拟一个业务，需要一秒钟来处理")
    }
    hRef.current.style.backgroundColor = `rgb(${r},${g},${b})`;

  }, [count]);
  return (
    <div>
      <h1 ref={hRef}>UseLayoutEffect案例组件========={count}</h1>
      <button type='button' onClick={() => setCount(count + 1)}>count + 1</button>
    </div>
  );
}

export default UserLayoutEffectView;
